{% extends "base.html" %}

{% block title %}底板管理 - 图片定制工具{% endblock %}

{% block content %}
<div class="d-flex justify-content-between align-items-center mb-4">
    <h2>
        <i class="bi bi-grid-3x3-gap me-2"></i>底板管理
    </h2>
    <button class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#templateModal">
        <i class="bi bi-plus-circle me-1"></i>创建底板
    </button>
</div>

<div class="row g-4" id="templatesContainer">
    {% if templates %}
        {% for template in templates %}
        <div class="col-lg-4 col-md-6">
            <div class="card h-100 shadow-sm template-card" data-template-id="{{ template.id }}">
                <div class="card-header d-flex justify-content-between align-items-center">
                    <h6 class="mb-0">{{ template.name }}</h6>
                    <div class="dropdown">
                        <button class="btn btn-sm btn-outline-secondary dropdown-toggle" 
                                data-bs-toggle="dropdown">
                            <i class="bi bi-three-dots"></i>
                        </button>
                        <ul class="dropdown-menu">
                            <li>
                                <a class="dropdown-item" href="{{ url_for('view_template', template_id=template.id) }}">
                                    <i class="bi bi-eye me-1"></i>查看详情
                                </a>
                            </li>
                            <li>
                                <a class="dropdown-item edit-template" href="#" data-template-id="{{ template.id }}">
                                    <i class="bi bi-pencil me-1"></i>编辑
                                </a>
                            </li>
                            <li><hr class="dropdown-divider"></li>
                            <li>
                                <a class="dropdown-item text-danger delete-template" href="#" 
                                   data-template-id="{{ template.id }}" data-template-name="{{ template.name }}">
                                    <i class="bi bi-trash me-1"></i>删除
                                </a>
                            </li>
                        </ul>
                    </div>
                </div>
                <div class="card-body">
                    <div class="template-preview mb-3">
                        {% if template.image_path %}
                            <div class="preview-box" style="aspect-ratio: {{ template.width }}/{{ template.height }};">
                                <img src="{{ url_for('get_template_image', template_id=template.id) }}" 
                                     alt="{{ template.name }}" 
                                     style="width: 100%; height: 100%; object-fit: cover; border-radius: 4px;"
                                     onerror="this.style.display='none'; this.nextElementSibling.style.display='flex';">
                                <span class="preview-text" style="display: none;">{{ template.width }}×{{ template.height }}</span>
                            </div>
                        {% else %}
                            <div class="preview-box" style="aspect-ratio: {{ template.width }}/{{ template.height }};">
                                <span class="preview-text">{{ template.width }}×{{ template.height }}</span>
                            </div>
                        {% endif %}
                    </div>
                    <p class="card-text text-muted small">
                        {{ template.description or '暂无描述' }}
                    </p>
                    <div class="template-info">
                        <small class="text-muted">
                            <i class="bi bi-calendar me-1"></i>
                            创建时间: {{ template.created_at.split(' ')[0] if template.created_at else '未知' }}
                        </small>
                    </div>
                </div>
                <div class="card-footer bg-transparent">
                    <div class="d-flex justify-content-between">
                        <a href="{{ url_for('view_template', template_id=template.id) }}" 
                           class="btn btn-sm btn-outline-primary">
                            <i class="bi bi-eye me-1"></i>查看
                        </a>
                        <a href="{{ url_for('intelligent_positioning') }}?template_id={{ template.id }}" 
                           class="btn btn-sm btn-primary">
                            <i class="bi bi-robot me-1"></i>智能定制
                        </a>
                    </div>
                </div>
            </div>
        </div>
        {% endfor %}
    {% else %}
        <div class="col-12">
            <div class="text-center py-5">
                <i class="bi bi-grid-3x3-gap display-1 text-muted"></i>
                <h4 class="mt-3 text-muted">还没有底板裁片</h4>
                <p class="text-muted">点击"创建底板"按钮开始创建您的第一个底板</p>
                <button class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#templateModal">
                    <i class="bi bi-plus-circle me-1"></i>创建底板
                </button>
            </div>
        </div>
    {% endif %}
</div>

<!-- 创建/编辑底板模态框 -->
<div class="modal fade" id="templateModal" tabindex="-1">
    <div class="modal-dialog modal-lg">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title">
                    <i class="bi bi-grid-3x3-gap me-2"></i>
                    <span id="modalTitle">创建底板</span>
                </h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
            </div>
            
            <!-- 选项卡导航 -->
            <div class="modal-header border-0 pb-0">
                <ul class="nav nav-tabs w-100" id="templateTabs" role="tablist">
                    <li class="nav-item" role="presentation">
                        <button class="nav-link active" id="upload-tab" data-bs-toggle="tab" 
                                data-bs-target="#upload-panel" type="button" role="tab">
                            <i class="bi bi-cloud-upload me-1"></i>上传底板文件
                        </button>
                    </li>
                    <li class="nav-item" role="presentation">
                        <button class="nav-link" id="manual-tab" data-bs-toggle="tab" 
                                data-bs-target="#manual-panel" type="button" role="tab">
                            <i class="bi bi-pencil me-1"></i>手动创建
                        </button>
                    </li>
                    <li class="nav-item" role="presentation">
                        <button class="nav-link" id="path-tab" data-bs-toggle="tab" 
                                data-bs-target="#path-panel" type="button" role="tab">
                            <i class="bi bi-folder me-1"></i>本地路径
                        </button>
                    </li>
                </ul>
            </div>
            
            <div class="tab-content" id="templateTabContent">
                <!-- 上传底板文件面板 -->
                <div class="tab-pane fade show active" id="upload-panel" role="tabpanel">
                    <form id="uploadForm" enctype="multipart/form-data">
                        <div class="modal-body">
                            <div class="mb-3">
                                <label for="uploadTemplateName" class="form-label">底板名称 *</label>
                                <input type="text" class="form-control" id="uploadTemplateName" name="name" required>
                            </div>
                            
                            <div class="mb-3">
                                <label for="templateImageFile" class="form-label">底板图片文件 *</label>
                                <input type="file" class="form-control" id="templateImageFile" name="template_image" 
                                       accept=".psd,.psb,.tif,.tiff,.png,.jpg,.jpeg,.gif,.webp" required>
                                <div class="form-text">支持 PSD, PSB, TIF, PNG, JPG, JPEG, GIF, WEBP 格式，本地部署无大小限制</div>
                                
                                <div id="uploadProgress" class="mt-2" style="display: none;">
                                    <div class="progress">
                                        <div class="progress-bar" role="progressbar" style="width: 0%"></div>
                                    </div>
                                </div>
                                
                                <div id="uploadPreview" class="preview-section mt-3" style="display: none;">
                                    <label class="form-label">预览</label>
                                    <div class="upload-preview-container">
                                        <img id="previewImage" class="upload-preview-image" alt="预览">
                                        <div class="upload-info">
                                            <div><strong>文件名:</strong> <span id="previewFilename"></span></div>
                                            <div><strong>尺寸:</strong> <span id="previewDimensions"></span></div>
                                            <div><strong>大小:</strong> <span id="previewFileSize"></span></div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                            
                            <div class="mb-3">
                                <label for="uploadTemplateDescription" class="form-label">描述</label>
                                <textarea class="form-control" id="uploadTemplateDescription" name="description" 
                                          rows="3" placeholder="可选的底板描述信息"></textarea>
                            </div>
                            
                        </div>
                        <div class="modal-footer">
                            <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">取消</button>
                            <button type="submit" class="btn btn-primary" id="uploadSubmitBtn" disabled>
                                <i class="bi bi-cloud-upload me-1"></i>上传并创建
                            </button>
                        </div>
                    </form>
                </div>
                
                <!-- 手动创建面板 -->
                <div class="tab-pane fade" id="manual-panel" role="tabpanel">
                    <form id="manualForm">
                        <div class="modal-body">
                            <input type="hidden" id="templateId" name="templateId">
                            
                            <div class="mb-3">
                                <label for="templateName" class="form-label">底板名称 *</label>
                                <input type="text" class="form-control" id="templateName" name="name" required>
                            </div>
                            
                            <div class="row">
                                <div class="col-md-6">
                                    <div class="mb-3">
                                        <label for="templateWidth" class="form-label">宽度 (px) *</label>
                                        <input type="number" class="form-control" id="templateWidth" name="width" 
                                               min="1" max="10000" required>
                                    </div>
                                </div>
                                <div class="col-md-6">
                                    <div class="mb-3">
                                        <label for="templateHeight" class="form-label">高度 (px) *</label>
                                        <input type="number" class="form-control" id="templateHeight" name="height" 
                                               min="1" max="10000" required>
                                    </div>
                                </div>
                            </div>
                            
                            <div class="mb-3">
                                <label for="templateDescription" class="form-label">描述</label>
                                <textarea class="form-control" id="templateDescription" name="description" 
                                          rows="3" placeholder="可选的底板描述信息"></textarea>
                            </div>
                            
                            <div class="preview-section">
                                <label class="form-label">预览</label>
                                <div class="template-size-preview" id="sizePreview">
                                    <div class="preview-box">
                                        <span class="preview-text">输入尺寸查看预览</span>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="modal-footer">
                            <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">取消</button>
                            <button type="submit" class="btn btn-primary">
                                <span id="submitText">创建底板</span>
                            </button>
                        </div>
                    </form>
                </div>
                
                <!-- 本地路径面板 -->
                <div class="tab-pane fade" id="path-panel" role="tabpanel">
                    <form id="pathForm">
                        <div class="modal-body">
                            <div class="mb-3">
                                <label for="pathTemplateName" class="form-label">底板名称 *</label>
                                <input type="text" class="form-control" id="pathTemplateName" name="name" required>
                            </div>
                            
                            <div class="mb-3">
                                <label for="templateImagePath" class="form-label">图片文件路径 *</label>
                                <input type="text" class="form-control" id="templateImagePath" name="image_path" 
                                       placeholder="例如: E:\OutProject\pod-image-composer\XL.psd 或 XL.tif" required>
                                <div class="form-text">输入本地图片文件的完整路径</div>
                                <button type="button" class="btn btn-sm btn-outline-secondary mt-2" id="loadFromPath">
                                    <i class="bi bi-arrow-clockwise me-1"></i>读取文件信息
                                </button>
                            </div>
                            
                            <div class="mb-3">
                                <label for="pathTemplateDescription" class="form-label">描述</label>
                                <textarea class="form-control" id="pathTemplateDescription" name="description" 
                                          rows="3" placeholder="可选的底板描述信息"></textarea>
                            </div>
                            
                            <div id="pathPreview" class="preview-section" style="display: none;">
                                <label class="form-label">文件信息</label>
                                <div class="path-preview-container">
                                    <div class="path-info">
                                        <div><strong>文件路径:</strong> <span id="pathFilename"></span></div>
                                        <div><strong>尺寸:</strong> <span id="pathDimensions"></span></div>
                                        <div><strong>文件大小:</strong> <span id="pathFileSize"></span></div>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="modal-footer">
                            <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">取消</button>
                            <button type="submit" class="btn btn-primary" id="pathSubmitBtn" disabled>
                                <i class="bi bi-folder-plus me-1"></i>创建底板
                            </button>
                        </div>
                    </form>
                </div>
            </div>
        </div>
    </div>
</div>
{% endblock %}

{% block extra_css %}
<style>
.template-card {
    transition: transform 0.2s;
}

.template-card:hover {
    transform: translateY(-2px);
}

.template-preview {
    background: var(--gray-50);
    border-radius: var(--border-radius);
    padding: 1rem;
}

.preview-box {
    background: white;
    border: 2px dashed var(--border-color);
    border-radius: var(--border-radius);
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 120px;
    max-height: 200px;
    position: relative;
    overflow: hidden;
}

.preview-text {
    color: var(--gray-500);
    font-size: 0.875rem;
    font-weight: 500;
}

.template-size-preview {
    background: var(--gray-50);
    border-radius: var(--border-radius);
    padding: 1rem;
    margin-top: 0.5rem;
}

.template-size-preview .preview-box {
    max-width: 300px;
    margin: 0 auto;
}

/* 上传预览样式 */
.upload-preview-container {
    display: flex;
    gap: 1rem;
    align-items: flex-start;
    background: var(--gray-50);
    border-radius: var(--border-radius);
    padding: 1rem;
}

.upload-preview-image {
    max-width: 150px;
    max-height: 150px;
    object-fit: cover;
    border-radius: var(--border-radius);
    border: 1px solid var(--border-color);
}

.upload-info {
    flex: 1;
    font-size: 0.875rem;
}

.upload-info > div {
    margin-bottom: 0.5rem;
}

.upload-info strong {
    color: var(--gray-700);
    display: inline-block;
    width: 60px;
}

/* 选项卡样式 */
.nav-tabs {
    border-bottom: 1px solid var(--border-color);
}

.nav-tabs .nav-link {
    color: var(--gray-600);
    border: none;
    border-bottom: 2px solid transparent;
    background: none;
    padding: 0.75rem 1.5rem;
}

.nav-tabs .nav-link:hover {
    color: var(--primary-color);
    border-bottom-color: var(--primary-color);
}

.nav-tabs .nav-link.active {
    color: var(--primary-color);
    border-bottom-color: var(--primary-color);
    background: none;
}

.progress {
    height: 8px;
    border-radius: 4px;
    background: var(--gray-200);
}

.progress-bar {
    background: var(--primary-gradient);
    border-radius: 4px;
    transition: width 0.3s ease;
}
</style>
{% endblock %}

{% block extra_js %}
<script src="{{ url_for('static', filename='js/templates_new.js') }}"></script>
{% endblock %}
